<template>
  <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul>
                <li class="prev" :class="{disabled:pageNo==1}">
                  <a href="javascript:;" @click="lastPage" >«上一页</a>
                </li>
                <li v-show="startNumAndEndNum.start>1" @click="$emit('getPageNo', 1)"><a>1</a></li>
                <li class="dotted" v-show="startNumAndEndNum.start>2"><span>...</span></li>
                <li :class="{active:value==pageNo}" v-for="(value,index) in startNumAndEndNum.end" :key="index" >
                  <a href="#" @click="$emit('getPageNo', value)" v-if="value>=startNumAndEndNum.start">{{value}}</a>
                </li>
                
                <li class="dotted" v-show="totalPage-startNumAndEndNum.end>1"><span>...</span></li>
                <li v-show="startNumAndEndNum.end<totalPage" @click="$emit('getPageNo', totalPage)"><a>{{totalPage}}</a></li>
                <li class="next" :class="{disabled:pageNo==totalPage}">
                  <a href="javascript:;" @click="nextPage">下一页»</a>
                </li>
              </ul>
              <!--   -->
            </div>
          </div>
</template>

<script>
export default {
    props:["pageNo", "pageSize", "total", "continues"],//pageNo当前的页码，pageSize每页的数量，total一共多少条数据，continues中间显示多少页的数量
    computed:{
      totalPage(){//总共多少页 
        return Math.ceil(this.total/this.pageSize)//向上取整
      },
      startNumAndEndNum() {//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
        const {continues,pageNo,totalPage} = this
        let start=pageNo - (continues-1)/2
        let end=pageNo + (continues-1)/2
        if(end < continues && totalPage>=continues){
          start=1
          end=continues
        }else if(end >= totalPage ){
          start= totalPage - continues + 1
          end = totalPage
        }else if(totalPage<continues){
          start=1
          end=totalPage
        }
        return {end,start}
      }
    },
    methods:{
      lastPage(){
        if(this.pageNo>1){
          this.$emit('getPageNo', this.pageNo - 1)
        }
      },
      nextPage(){
        if(this.pageNo<this.totalPage){
          this.$emit('getPageNo', this.pageNo + 1)
        }
      }
    }
}
</script>

<style lang='less' scoped>
.page {
          width: 733px;
          height: 66px;
          overflow: hidden;
          margin: auto;

          .sui-pagination {
            margin: 18px 0;

            ul {
              margin-left: 0;
              margin-bottom: 0;
              vertical-align: middle;
              // width: 490px;
              float: left;

              li {
                line-height: 18px;
                display: inline-block;

                a {
                  position: relative;
                  float: left;
                  line-height: 18px;
                  text-decoration: none;
                  background-color: #fff;
                  border: 1px solid #e0e9ee;
                  margin-left: -1px;
                  font-size: 14px;
                  padding: 9px 18px;
                  color: #333;
                }

                &.active {
                  a {
                    background-color: #fff;
                    color: #e1251b;
                    border-color: #fff;
                    cursor: default;
                  }
                }

                &.prev {
                  a {
                    background-color: #fafafa;
                  }
                }

                &.disabled {
                  a {
                    color: #999;
                    // cursor: default;
                    cursor:not-allowed
                  }
                }

                &.dotted {
                  span {
                    margin-left: -1px;
                    position: relative;
                    float: left;
                    line-height: 18px;
                    text-decoration: none;
                    background-color: #fff;
                    font-size: 14px;
                    border: 0;
                    padding: 9px 18px;
                    color: #333;
                  }
                }

                &.next {
                  a {
                    background-color: #fafafa;
                  }
                }
              }
            }

            div {
              color: #333;
              font-size: 14px;
              float: right;
              width: 241px;
            }
          }
        }
</style>